import React, { useEffect, useState } from 'react';
import { Descriptions, Divider, Typography } from 'antd';
import { useModel } from 'umi';

const SettlementInfo: React.FC<any> = (props) => {
  const { initialState } = useModel('@@initialState');
  const { goods } = props;
  const [settPrice, setSettPrice] = useState<number>();
  const [goodsNum, setGoodsNum] = useState<number>();

  useEffect(() => {
    if (goods) {
      console.log(goods)
      let price = 0;
      let nums = 0;
      goods?.forEach(item => {
        price += parseFloat(item.goods_total_price);
        nums += item.goods_num;
      });
      setSettPrice(parseFloat(price).toFixed(2));
      setGoodsNum(nums);
    }
  }, [goods]);

  return <div className="service-record-rent">
      <div className="header">
        <div className="title">3.结算信息</div>
      </div>
      <Divider style={{margin: '10px 0'}}/>
      <Descriptions className="sett-info-descriptions">
        <Descriptions.Item label="物品数量">
          <Typography.Text strong type="danger">{goodsNum}</Typography.Text> (件)
        </Descriptions.Item>
        <Descriptions.Item label="结算价格">
          <Typography.Text strong type="danger">{Number(settPrice).toFixed(2)}</Typography.Text> (元)
        </Descriptions.Item>
        <Descriptions.Item label="订单创建人">
          {initialState?.currentUser?.oper_name}
        </Descriptions.Item>
      </Descriptions>
  </div>
}
export default SettlementInfo;